<template>
    <!-- 加工验收列表 -->
    <div class="e-table billList">
         <TopStep :stepInfo="stepInfo" />
        <div class="top">
            <div class="left" style="margin-left: 10px">
                <div>
                    <el-button
                        size="mini"
                        @click="buttonAdd"
                        style="background: #7aa818; color: #fff"
                        v-permission="['edit']"
                        >新增</el-button
                    >
                </div>
                <!-- <div
          style="padding-left: 10px; cursor: pointer"
          @click="batchOperation"
        >
          <img src="@/assets/piliang.png" />
          <span style="padding-left: 8px">{{ batch }}</span>
        </div> -->
            </div>
            <div class="right">
                <div class='right-div1'>
                    <el-input
                        placeholder=""
                        v-model="query.keyword"
                        size="small"
                        @blur='getData'
                        @keyup.enter.native="getData"
                    >
                        <i slot="suffix" class="el-icon-search like" @click="getData"></i>
                    </el-input>
                </div>
                <div>
                    <el-button
                        size="small"
                        style="background: #2e61d7; color: #fff"
                        @click='onAdvancedSearch'
                        >高级搜索</el-button
                    >
                </div>
            </div>
        </div>

        <el-table
            border
            ref="table"
            :data="tableData"
            style="width: 100%"
            class="table"
            highlight-current-row
            height="450"
            v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'table' }"
        >
            <!-- <el-table-column type="selection" width="50" v-if="isBatch" fixed>
      </el-table-column> -->
            <!-- <el-table-column
                show-overflow-tooltip
                label="操作"
                fixed
                width="100px"
            >
                <template slot-scope="scope">
                    <div>
                        <i
                            class="el-icon-edit"
                            style="cursor: pointer; font-size: 20px"
                            :class="{
                                'icon-edit-active-color':
                                    MouseEnterId == scope.row.billId
                            }"
                            @click="tableDbEdit(scope.row.billId)"
                        ></i>
                    </div>
                </template>
            </el-table-column> -->
            <el-table-column
                label="验收编号"
                min-width="300"
                fixed
                show-overflow-tooltip
            >
                <template v-slot="{ row }">
                    <span
                        @click="Examine(row)"
                        style="color: blue; cursor: pointer"
                    >
                        {{ row.billNo }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                prop="acceptanceDate"
                label="验收日期"
                width="150"
                fixed
            >
            </el-table-column>
            <el-table-column
                prop="processingUnitName"
                label="加工单位"
                min-width="250"
                show-overflow-tooltip
                align='left'
            >
            </el-table-column>
            <el-table-column
                prop="acceptanceQuantity"
                label="验收数量"
                width="150"
                align='right'
            >
            </el-table-column>
            <el-table-column
                prop="acceptanceAmount"
                label="验收金额（元）"
                width="150"
                align='right'
            >
            </el-table-column>
            <el-table-column label="是否计加工费" width="150">
                <template v-slot="{ row }">
                    {{ ['否', '是'][row.isIncludingProcessingFee] }}
                </template>
            </el-table-column>
            <el-table-column label="收料类型" width="150">
                <template v-slot="{ row }">
                    {{ ['普通加工', '砼加工'][row.receivingType] }}
                </template>
            </el-table-column>
            <el-table-column label="状态" width="150" show-overflow-tooltip>
                <template slot-scope="scope">
                    <ToolHistory
                        v-if="scope.row.state === 1"
                        :key="scope.$index"
                        url="/materialsettle/flowEngin/getAuditHistory"
                        :billId="scope.row.billId"
                        :billType="1016"
                    >
                        <span v-status="scope.row.state">
                            {{ showState(scope.row.state) }}
                        </span>
                    </ToolHistory>
                    <span v-status="scope.row.state" v-else>{{showState(scope.row.state)}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="redBillState" label="红单状态" width="150">
                <template v-slot="{ row }">
                    <span
                        style="color: blue; cursor: pointer"
                        @click="redClick(row)"
                        >{{ row.redState }}</span
                    >
                </template>
            </el-table-column>
            <el-table-column
                prop="orgName"
                label="所属机构"
                min-width="250"
                show-overflow-tooltip
                align='left'
            >
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <ComPagination
            :total="total"
            :pageSize.sync="query.limit"
            :currentPage.sync="query.page"
            @currentChange="getData"
            @sizeChange="getData"
            class="bottomSetting"
        />
    </div>
</template>
<script>
import ComPagination from '@/components/pagination/pagination.vue'
import processingRequest from '@/api/materials/processingAcceptance'
import materialsRequest from '@/api/materials/materialAcceptance'
import { vueDom, debounce, advanceSearch, showLoading, hideLoading } from '@/utils/common.js'
import TopStep from '@/components/topstep/topstep'

export default {
    components: {
        ComPagination,
        TopStep
    },
    data () {
        return {
            isBatch: false, //是否进入批量操作
            batch: '进入批量管理',
            dialogVisibleSearch: false,
            searchIpt: '',
            input1: '',
            value1: '',
            value2: '',
            multipleSelection: [],
            tableData: [],
            MouseEnterId: 0,
            total: 1,
            tableHeight: 0,
            query: {
                beginPlanDate: '',
                endPlanDate: '',
                isIncludingProcessingFee: [],
                keyword: '',
                limit: 20,
                orgId: '',
                page: 1,
                processingUnitId: '',
                receivingType: [],
                states: []
            },
            auditParams: {
                billId: '',
                billType: 1016,
                freeNextUnitIndex: null,
                freeNextUser: '',
                isPass: true,
                isShareInAudit: true,
                opinion: '',
                orgId: '',
                orgName: '',
                userId: '',
                workId: ''
            },
            stepInfo: [
                {
                    description: '加工收料'
                },
                {
                    description: '加工验收'
                }
            ]
        }
    },
    computed: {
        // //获取状态
        // statusLable () {
        //     return param => {
        //         const state = this.$store.state.settlementManagement.ysState
        //         const obj = state.find(x => x.value === Number(param))
        //         return obj.label
        //     }
        // }
    },
    created () {
        this.getData()
    },
    mounted () {
        // table动态高度
        vueDom(
            () => {
                this.tableHeight = document.body.clientHeight - 240
            },
            () => {
                return $('table').length !== 0
            }
        )
        this.fn = () => {
            this.tableHeight = document.body.clientHeight - 240
        }
        window.onresize = debounce(this.fn)
    },
    methods: {
        async getData () {
            try{
                showLoading()
                let res = await processingRequest.getProcessCheck(this.query)
                let data = res.list || []
                data.forEach(item => {
                    switch (item.redBillState) {
                    case -1:
                        item.redState = ''
                        break
                    case 0:
                        item.redState = '冲销中'
                        break
                    case 1:
                        item.redState = '冲销中'
                        break
                    case 2:
                        item.redState = '已冲销'
                        break
                    case 3:
                        item.redState = '红单'
                        break
                    }
                })
                this.tableData = data
                this.total = res.totalCount
            }finally{
                hideLoading()
            }
        },
        //新增按钮
        buttonAdd () {
            this.$router.push('/processCheckAdd')
        },

        //点击编号根据单据状态进入编辑页/详情页
        Examine (row) {
            if (row.state === -1 || row.state === 2 || row.state === 5 || !this.permission(['edit'])) {
                this.$router.push({
                    path: '/processCheckDetails',
                    query: { billid: row.billId }
                })
            } else {
                this.auditParams.billId = row.billId
                materialsRequest
                    .getCurrentUnitInfo(this.auditParams)
                    .then(res => {
                        if (res.canModify == true) {
                            this.$router.push({
                                path: '/processCheckEdit',
                                query: { billid: row.billId }
                            })
                        } else {
                            this.$router.push({
                                path: '/processCheckDetails',
                                query: { billid: row.billId }
                            })
                        }
                    })
            }
        },
        // 点击红单状态的文字
        redClick (row) {
            this.auditParams.billId = row.billId
            if (row.redBillState == 3) {
                // 如果该单据就是红单,则点击时进入源单详情页
                this.$router.push({
                    path: '/processCheckDetails',
                    query: { billid: row.sourceId }
                })
            } else {
                // 如果点击的该单据不是红单,则点击超链接进入红单
                // 如果进入红单,还需判断进入该红单的编辑页还是详情页
                if (row.redBillState == 0) {
                    this.$router.push({
                        path: '/processCheckEdit',
                        query: { billid: row.redBillId }
                    })
                } else if (row.redBillState == 1 || row.redBillState == 2) {
                    this.$router.push({
                        path: '/processCheckDetails',
                        query: { billid: row.redBillId }
                    })
                }
            }
        },
        // 高级搜索
        onAdvancedSearch () {
            advanceSearch('/processingAccAdvancedSearch').then(res => {
                this.query.beginPlanDate = res.beginPlanDate
                this.query.endPlanDate = res.endPlanDate
                this.query.isIncludingProcessingFee = res.isIncludingProcessingFee
                this.query.orgId = res.orgId
                this.query.processingUnitId = res.processingUnitId
                this.query.receivingType = res.receivingType
                this.query.states = res.states
                // this.setSelectedInfo(this.query)
                // openAppClient('/showSelectedData', '搜索参数')
                this.getData()
            })
        },
        showState (state) {
            const _state = this.$store.state.settlementManagement.ysState
            const obj = _state.find(x => x.value === Number(state))
            return obj.label
        }

        //  //批量管理
        // batchOperation () {
        //     this.isBatch = !this.isBatch
        //     if (this.isBatch) {
        //         this.batch = '退出批量管理'
        //         this.$refs.table.clearSelection()
        //     } else {
        //         this.batch = '进入批量管理'
        //     }
        // },
        //搜索
        // search () {
        //     this.$Ajax
        //         .httpPost({
        //             url: '/outer/subcontractor/listByEntity',
        //             params: {
        //                 keyword: this.searchIpt,
        //                 limit: 10,
        //                 page: 1,
        //             },
        //         })
        //         .then(res => {
        //             this.tableData = res.list
        //         })
        // },
    }
}
</script>
<style lang="scss" scoped>

// ::v-deep.el-table .cell {
//     text-align: center;
// }

::v-deep .el-table__fixed{
    height: 98.5% !important;
    bottom: 17px !important;
}
::v-deep .el-table__fixed-body-wrapper {
    height: 100% !important;
}
</style>
